
const openRem = () => {
    // 设置 rem 基准大小
    const setRem = () => {
        const designWidth = 1920; // 设计稿宽度
        const baseFontSize = 100; // 1920px 时 1rem = 100px
        const currentWidth = document.documentElement.clientWidth;

        // 计算当前屏幕宽度相对于设计稿的 rem 基准值
        const fontSize = (currentWidth / designWidth) * baseFontSize;

        document.documentElement.style.fontSize = fontSize + 'px';
    }
    // 初始化
    setRem();
    window.addEventListener('resize', setRem);
}
// 类的方式封装rem适配逻辑
export class RemAdapt {
    /** 设计分辨率 */
    public static designResolution = {
        width: 1920,
        height: 1080,
    };

    /** 预设字体大小(px) */
    public static presetFontSize = 100;

    /** 开启Rem适配 */
    public static open() {
        // 执行设置字体
        this.resizeRootFontSize();

        // 设置事件监听
        window.addEventListener('load', this.resizeRootFontSize.bind(this), false);
        window.addEventListener('resize', this.resizeRootFontSize.bind(this), false);
        document.addEventListener('DOMContentLoaded', this.resizeRootFontSize.bind(this), false);
    }

    /** 关闭Rem适配 */
    public static close() {
        window.removeEventListener('load', this.resizeRootFontSize.bind(this), false);
        window.removeEventListener('resize', this.resizeRootFontSize.bind(this), false);
        document.removeEventListener('DOMContentLoaded', this.resizeRootFontSize.bind(this), false);
    }

    // 计算根元素fontSize
    private static resizeRootFontSize() {
        // 获取文档
        const html = document.documentElement;

        // 转换字体大小
        const fontSize = (html.clientWidth / this.designResolution.width) * this.presetFontSize;

        // 设置字体大小
        html.style.fontSize = fontSize + 'px';
    }
}
export default openRem;